<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站后台模板</title>
    <link rel="stylesheet" href="/stylesheets/manage.css">
</head>
<body>
    <!--顶部信息区-->
    <header role="header">
        <%- include('./mainTop.html')%>
    </header>
    <!--圣杯二列布局-->
    <main role="main">
        <!--主体内联框架区-->
        <article role="content">
            <div>
              <p align="center">
                <form id="suserform" action="/users/manage" method="post">
                    用户编号:<input type="text" value="" size="4" maxlength="10" name="sno" id="sno" />&nbsp;&nbsp;
                    用户名：<input type="text" value="" size="4" maxlength="10" name="sname" id="sname" />&nbsp;&nbsp;
                    性别:<select name="ssex" id="ssex">
                    <option value="" checked>请选择</option>
                        <option value="1">男</option>
                        <option value="0">女</option>
                    </select>&nbsp;&nbsp;         
                       角色：<select name="srole" id="srole">
                        <option value="" checked>请选择</option>
                            <%for(let i=0;i<roles.length;i++){%>
                              <option value="<%=roles[i].id%>"><%=roles[i].roleName%></option>
                            <%}%>
                        </select>&nbsp;&nbsp;
                        <input type="button" value="查询" onclick="goSearch()" />
                        <p>
                        <input type="button" value="添加新用户" />
                        </p >
                        <% if(users) {%>
                        <table align="center" width="800" border="1" style="text-align:center;">
                            <tr bgcolor="aliceblue">
                            <th>序号</th>
                            <th>编号</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>角色</th>
                            <th>操作</th>
                            </tr>
                            <% for(let i=0;i<users.length;i++){%>
                            <%if(i%2==0){%>
                            <tr bgcolor="aliceblue">
                            <%}else{%>
                                <tr>
                            <%}%>
                            <td><%=i+1%></td>       
                            <td><%=users[i].userNum%> </td>
                            <td><%=users[i].userName%></td>
                            <%if(users[i].sex==1){%>
                                    <td>男</td>
                            <%}else{%>
                                    <td>女</td>
                            <%}%>
                            <td><%=users[i].roleInfo.roleName%></td>
                            <td>
                               <a href="">查看</a>
                               <a href="">编辑</a>
                               <a href="">删除</a>
                            </td>
                        </tr>
                   <%}%>
            </table>
            <%}else{%>
                    <p>查询不到相关的用户信息</p >
            <%}%>
                    <!-- 分页栏 -->
            <%if(pageCount>0){%>
            <p align="center">
                        <input type="button" value="首页" onclick="goSearchPage(0)">&nbsp;&nbsp;
                        <input type="button" value="上一页" onclick="goSearchPage(3)">&nbsp;&nbsp;
                        <input type="button" value="下一页" onclick="goSearchPage(2)">&nbsp;&nbsp;
                        跳转至第<input type="text" value="<%=sindex%>" size="1" id="showindex" />
                        /<%=Math.round(pageCount /pageSize)%>页
                        <input type="button" value="GO" onclick="goSearchPage(1)"/>
            </p>
            <%}%>
            <input type="hidden" value="<%=sindex%>" name="sindex" id="sindex"/>
            ..
            </form>
              </p>
            </div>

        </article>
        <!--左侧导航区-->
        <aside>
            <%- include('./mainMenu.html')%>
        </aside>
    </main>
</body>
<script>
     function checkFrom(){
        let sno =  document.getElementById("sno").value;
        let sname =  document.getElementById("sname").value;

        let objSex = document.getElementById("ssex");
        let objSexIndex = objSex.selectedIndex;
        let ssex = objSex.options[objSexIndex].value;
    
        let objRole = document.getElementById("srole");
        let objRoleIndex = objSex.selectedIndex;
        let srole = objRole.options[objRoleIndex].value;

        let sindex = document.getElementById("sindex").value;
        console.log("sindex:"+sindex);
        localStorage.setItem("sno",sno)
        localStorage.setItem("sname",sname)
        localStorage.setItem("ssex",ssex)
        localStorage.setItem("srole",srole)
        localStorage.setItem("sindex",sindex)
        return true
    }
    function initSearch() {
        if(localStorage.getItem("sno")){
            document.getElementById("sno").value = localStorage.getItem("sno")
        }
        if(localStorage.getItem("sname")){
            document.getElementById("sname").value = localStorage.getItem("sname")
        }
        if(localStorage.getItem("ssex")){
            document.getElementById("ssex").value = localStorage.getItem("ssex")
        }
        if(localStorage.getItem("srole")){
            document.getElementById("srole").value = localStorage.getItem("srole")
        }
        if(localStorage.getItem("sindex")){
            document.getElementById("sindex").value = localStorage.getItem("sindex")
        }
    }
    function goSearch(){
        document.getElementById("sindex").value = 1
        let form = document.getElementById('suserform');
        checkFrom();
        form.submit();
    }
    function goSearchPage(pagetype){

        let pageCount = document.getElementById("scount").value;
        let spsize = document.getElementById("spsize").value;
        console.log(pageCount);
        console.log(spsize);
        if(pagetype == 1){//跳转
            if(pageCount/spsize < document.getElementById("showindex").value){
                document.getElementById("showindex").value = 
                    document.getElementById("sindex").value;
            }else{
                document.getElementById("sindex").value = 
                     document.getElementById("showindex").value;
                localStorage.setItem("sindex",document.getElementById("showindex").value);
            }
        }else if(pagetype == 2){//下一页
            let addPage = parseInt(document.getElementById("showindex").value) + 1;
            console.log("下一页:"+addPage);
            console.log("总页数:"+Math.round(pageCount/2));
            if(addPage <= Math.round(pageCount/2)){
                document.getElementById("showindex").value = addPage;
                document.getElementById("sindex").value = addPage;
                localStorage.setItem("sindex",addPage)
            }else{
                alert("后面没有了！！")
                return false;
            }
        }else if(pagetype == 3){//上一页
            let prepPage = parseInt(document.getElementById("showindex").value) - 1;
            console.log("上一页:"+prepPage);
            if(0<prepPage){
                document.getElementById("showindex").value = prepPage;
                document.getElementById("sindex").value = prepPage;
                localStorage.setItem("sindex",prepPage)
            }else{
                alert("已经在首页了！！")
                return false;
            }
    }else{//首页
        document.getElementById("showindex").value = 1;
        document.getElementById("sindex").value = 1;
        localStorage.setItem("sindex",1)
    }

    let form = document.getElementById('suserform');
    checkFrom();
    form.submit();
}
</script>

</html>